The Critical Rendering Path

Back to Home

01. Critical Rendering Path Walkthrough
02. Converting HTML to the DOM
03. Fast Google Search Responses
04. Exploring Timeline Traces
05. Building the DOM
06. Converting CSS to the CSSOM
07. Which styles render faster?
08. Recalculating CSS Styles in DevTools
09. The Render Tree
10. Which screen elements are visible?
11. Layout
12. Calculating Layout
13. Analyzing Layout in DevTools
14. Finding Examples of Expensive Layouts
15. Time to Paint the Page!
16. Analyzing Paint in DevTools
17. Steps to Render the Page
18. Analyzing the Entire CRP in DevTools
19. Practice Optimizing the CRP
20. CRP Wrap Up

Back to Home

05. Building the DOM

Building the DOM

Question:

Start Quiz:

Solution:

INSTRUCTOR NOTE:

Follow your instructors!

+Ilya Grigorik, @igrigorik

@cwpittman

udacimak v1.3.0